.audio-list-page {
  min-height: 100vh;
  background: #fff;
}

.no-mode-translate-demo-wrapper {
  position: relative;
}

.no-mode-translate-fade-enter-active,
.no-mode-translate-fade-leave-active {
  transition: all 0.5s;
  position: absolute;
}

.no-mode-translate-fade-enter {
  transform: translateX(100vw);
}

.no-mode-translate-fade-leave-active {
  transform: translateX(-100vw);
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 0.02rem solid #ebebeb;
}

.sort-list {
  display: flex;
  height: 0.96rem;
  font-size: 0.34rem;
  color: #999999;
  align-items: center;
  justify-content: center;

  li {
    position: relative;
    height: 100%;
    line-height: 0.96rem;

    &.active {
      color: $them;

      &::after {
        width: 100%;
      }
    }

    &:not(:last-child) {
      margin-right: 0.66rem;
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 0.06rem;
      background-color: $them;
      transition: 0.2s all linear;
    }
  }
}

.audio-list-container {
  width: 100%;

  .audio-list-wrapper {
    .title {
      position: relative;
      margin-left: 0.23rem;
      display: flex;
      align-items: center;
      height: 0.96rem;
      font-size: 0.32rem;
      color: #000;
      border-bottom: 0.01rem solid #ebebeb;

      &::before {
        content: "";
        margin-right: 0.12rem;
        width: 0.16rem;
        height: 0.16rem;
        background-color: $them;
      }

      .text {
        flex: 1;
      }

      .date,
      .time {
        margin-right: 0.15rem;
      }

      .arrow {
        margin-right: 0.23rem;
        width: 0.44rem;
        height: 0.44rem;
        background-image: url("../assets/下一步48X48@2x.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        transform: rotate(90deg);
        transition: all 0.3s ease-in-out;

        &.open {
          transform: rotate(-90deg);
        }
      }
    }
  }
}

.audio-list {
  margin-left: 0.53rem;
  overflow: hidden;

  .audio {
    box-sizing: border-box;
    padding-bottom: 0.21rem;
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    height: 1.51rem;
    border-bottom: 0.01rem solid #ebebeb;

    .img-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 0.14rem;
      width: 2.08rem;
      height: 1.3rem;

      // background-color: #999;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }

    .content {
      flex: 1;

      .audio-title-en {
        max-width: 3.46rem;
        white-space: nowrap;
        font-size: 0.28rem;
        line-height: 1;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .audio-title-cn {
        margin: 0.14rem 0;
        font-size: 0.2rem;
        line-height: 1;
        color: #666;
      }

      .other {
        font-size: 0.2rem;
        line-height: 1;
        color: #999;

        .icon {
          display: inline-block;
          margin-right: 0.08rem;
          width: 0.2rem;
          height: 0.2rem;
          background-size: 100%;
          background-repeat: no-repeat;
          background-position: center;
          vertical-align: middle;
        }

        .play-container {
          margin-right: 0.23rem;

          .icon {
            background-image: url("../assets/播放记录图标20X20@2x.png");
          }
        }

        .praise-container {
          .icon {
            background-image: url("../assets/未点赞20X20@2x.png");
          }
        }
      }
    }

    .detail {
      margin-right: 0.23rem;
      width: 0.44rem;
      height: 0.44rem;
      background-image: url("../assets/下一步48X48@2x.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}